//style
*{
  margin: 0;
  padding: 0;
}
input,input[type='button'],button{
  -webkit-appearance: none;
}
a,a:visited{
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
}
div,a,img{
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
}
ul{list-style: none;}
.fixed{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 99;
  display: none;
}
.clearFloat{
  clear: both;
}
.white{
  color: white;
}
.center{
  text-align: center;
}
.before(@left,@top,@width,@height){
  content:"";
  position: absolute;
  left: @left;
  top: @top;
  width: @width;
  height: @height;
}
.messageBox{
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.72);
  color: white;
  padding: .2rem;
  border-radius: .09rem;
  font-size: .28rem;
  z-index: 999;
}
body{
  background: url(../img/body-bg.png) #C70529 repeat-y;
  background-size: 100% auto;
  -webkit-overflow-scrolling: touch;
}
#index{
  width: 100%;
  height: 100%;
  background: url(../img/index-bg.png) no-repeat;
  background-size: 100% auto;
  //填写信息
  .fill-information{
    display: block;
    section{
      width: 5.5rem;
      position: absolute;
      top: 50%;
      left: 50%;
      background: url(../img/body-bg.png) #C70529 repeat-y;
      background-size: 7.5rem auto;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      border-radius: .1rem;
      padding: .55rem;
      box-sizing: border-box;
      h2{
        .center;
        .white;
        font-size: .31rem;
        letter-spacing: 1px;
        margin-bottom: .55rem;
      }
      form{
        input{
          width: 100%;
          border-radius: .1rem;
          padding: 0 .3rem;
          height: .7rem;
          box-sizing: border-box;
          outline: none;
          font-size: .28rem;
          border: none;
          margin-bottom: .3rem;
        }
        input[type='button']{
          color: #C70529;
          background: #FFDFBA;
        }
      }
      p{
        .center;
        color: #E4A5AB;
        font-size: .25rem;
      }
    }
  }
  .rule-btn{
    padding: .3rem .3rem 0 0;
    box-sizing: border-box;
    a{
      float: right;
      display: inline-block;
      line-height: .55rem;
      border: 2px solid #FDB200;
      background: #FFDFBA;
      color: #C70529;
      font-size: .27rem;
      font-weight: 600;
      border-radius: .3rem;
      padding: 0 .4rem;
    }
    .rule{
      section{
        width: 6.88rem;
        position: absolute;
        top: 50%;
        left: 50%;
        background: url(../img/body-bg.png) #C70529 repeat-y;
        background-size: 100% auto;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        border-radius: .1rem;
        padding: 0 .6rem;
        box-sizing: border-box;
        //标题
        .lots-title{
          text-align: center;
          margin: .3rem auto -.1rem;
          span{
            font-size: .35rem;
            color: #C70529;
            font-weight: 600;
            display: inline-block;
            height: .8rem;
            line-height: .78rem;
            width: .8rem;
            background: #FFDFBA;
            border-radius: 50%;
            margin: 0 -.15rem;
            border: 2px solid #FFC04F;
            position: relative;
            &:before{
              .before(0,0,100%,100%);
              content: attr(data-txt);
              border-radius: 50%;
              background: #FFDFBA;
              z-index: 6;
            }
          }
        }
        .rule-list{
          max-height: 8.5rem;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
          h5{
            color: #FFD016;
            margin: .4rem 0 .1rem 0;
            font-size: .28rem;
          }
          p{
            font-size: .27rem;
            text-align: justify;
            .white;
            border-bottom: 1px solid #EE8944;
            line-height: .45rem;
            padding-bottom: .1rem;
            margin-bottom: .1rem;
          }
          .prize{
            text-align: center;
            span:nth-of-type(1){
                float: left;
            }
            span:nth-of-type(3){
              float: right;
            }
          }
          aside{
            .center;
            color: #FFD016;
            font-size: .27rem;
            margin: .3rem 0;
          }
        }
        .cancel{
          position: absolute;
          right: .1rem;
          top: .1rem;
          display: inline-block;
          width: .45rem;
          height: .45rem;
          background: url("../img/cancel-icon.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
  .drum{
    position: relative;
    margin-top: 3rem;
    .drum-img{
      width: 5.18rem;
      height: 6.57rem;
      margin: 0 auto;
      background: url("../img/index-drum.png") no-repeat center;
      background-size: 100% 100%;
    }
    .lots-btn{
      position: absolute;
      right: .3rem;
      span{
        font-size: .28rem;
        color: #C70529;
        font-weight: 600;
        display: block;
        height: .55rem;
        text-align: center;
        line-height: .55rem;
        width: .55rem;
        background: #FFDFBA;
        border-radius: 50%;
        margin: -0.15rem 0 ;
        border: 2px solid #FFC04F;
        position: relative;
        &:before{
          .before(0,0,100%,100%);
          content: attr(data-txt);
          border-radius: 50%;
          background: #FFDFBA;
          z-index: 6;
        }
      }
      top: calc(~"50% - 1.25rem");
      //font-size: .1rem;
      //background: url("../img/my-lots.png") no-repeat;
      //background-size: 100%;
      //color: transparent;
    }
    .my-lots{
      section{
        width: 6.88rem;
        position: absolute;
        top: 50%;
        left: 50%;
        background: url(../img/body-bg.png) #C70529 repeat-y;
        background-size: 100% auto;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        border-radius: .1rem;
        padding: 0 .6rem;
        box-sizing: border-box;
        //标题
        .lots-title{
          text-align: center;
          margin: .3rem auto .1rem;
          span{
            font-size: .35rem;
            color: #C70529;
            font-weight: 600;
            display: inline-block;
            height: .8rem;
            line-height: .78rem;
            width: .8rem;
            background: #FFDFBA;
            border-radius: 50%;
            margin: 0 -.15rem;
            border: 2px solid #FFC04F;
            position: relative;
            &:before{
              .before(0,0,100%,100%);
              content: attr(data-txt);
              border-radius: 50%;
              background: #FFDFBA;
              z-index: 6;
            }
          }
        }
        .list-title{
          margin-bottom: .15rem;
            b{
              display: inline-block;
              width: 50%;
              text-align: center;
              font-size: .3rem;
              letter-spacing: 1px;
              color: white;
              font-weight: 600;
              &:nth-of-type(1){
                border-right: 1px solid #F5B8A0;
                box-sizing: border-box;
              }
            }
        }
        ul{
          max-height: 6.25rem;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
          li{
            border-top:1px solid #F08F48;
            box-sizing: border-box;
            line-height: .5rem;
            span,b{
              display: inline-block;
              width: 49%;
              text-align: center;
              line-height: .6rem;
              font-size: .3rem;
              color: white;
              vertical-align: middle;
              img{
                max-height: .46rem;
                display: block;
                margin: 0 auto;
              }
            }
            &:nth-last-of-type(1){
              border-bottom:1px solid #F08F48;
            }
          }
        }
        p{
          text-align: center;
          color: white;
          font-size: .26rem;
          margin-top: .2rem;
          b{
            font-size: .32rem;
            color: #FFD53F;
            margin: 0 2px;
          }
        }
        .draw-btn{
          width: 4.9rem;
          height: 1.6rem;
          background: url("../img/btn-bg.png") no-repeat;
          background-size: 100% auto;
          color: #C70529;
          margin: 0 auto;
          text-align: center;
          line-height: 1.65rem;
          font-size: .4rem;
          font-weight: 800;
          letter-spacing: 2px;
        }
        .cancel{
          position: absolute;
          right: .1rem;
          top: .1rem;
          display: inline-block;
          width: .45rem;
          height: .45rem;
          background: url("../img/cancel-icon.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
  .drum2{
    display: none;
    margin-top: 3rem;
    .drum-img2{
      width: 3.6rem;
      height: 6.2rem;
      margin: 0 auto;
      background: url("../img/drum.png") no-repeat center;
      background-size: 100% 100%;
      animation: sharkDrum .6s linear infinite;
      -webkit-transform-origin: center bottom;
      transform-origin: center center
    }
    @keyframes sharkDrum {
      0%,100%{
        transform: translate(0,0) rotate(0deg);
      }
      25%{
        transform: translate(5px,-5px) rotate(15deg);
      }
      75%{
        transform: translate(-5px,-5px) rotate(-15deg);
      }
    }
    p{
      .center;.white;
      font-size: .3rem;
      letter-spacing: 2px;
      margin-top: .5rem;
      span{
        display: inline-block;
        vertical-align: middle;
        width: 3px;
        height: 3px;
        margin: 0 3px;
        border-radius: 50%;
        background: white;
      }
      span:nth-of-type(1){
        animation: loading 1s .2s linear infinite;
      }
      span:nth-of-type(2){
        animation: loading 1s .4s linear infinite;
      }
      span:nth-of-type(3){
        animation: loading 1s .8s linear infinite;
      }
      @keyframes loading {
        0%,60%,100% {transform: scale(1);}
        30% {transform: scale(2);}
      }
    }
  }
  .extract-btn{
    width: 4.9rem;
    height: 1.8rem;
    background: url("../img/btn-bg.png") no-repeat;
    background-size: 100% 100%;
    color: #C70529;
    margin: 0 auto;
    text-align: center;
    line-height: 1.65rem;
    font-size: .4rem;
    font-weight: 700;
    letter-spacing: 2px;
    i{
      vertical-align: middle;
      display: inline-block;
      margin: 0 5px 0 2px;
      width: .5rem;
      height: .5rem;
      border-radius: 50%;
      background-color: #C70529;
      position: relative;
      &:before{
        .before(.075rem,.075rem,.35rem,.35rem);
        border-radius: 50%;
        background: url("../img/shark-icon.png") center no-repeat;
        background-size: .35rem .35rem;
        animation: shark 1.5s linear infinite;
      }
      @keyframes shark {
        0% {
          -webkit-transform: translate(0px, 0px) rotate(0deg)
        }
        20% {
          -webkit-transform: translate(0px, 0px) rotate(20deg)
        }
        50% {
          -webkit-transform: translate(0px, 0px) rotate(0deg)
        }
        70% {
          -webkit-transform: translate(0px, 0px) rotate(-15deg)
        }
        80% {
          -webkit-transform: translate(0px, 0px) rotate(0deg)
        }
        100% {
          -webkit-transform: translate(0px, 0px) rotate(0deg) scale(1.1)
        }
      }
    }
  }
  .prize{
    section{
      width: 6.25rem;
      height: 5.69rem;
      position: absolute;
      top: 50%;
      left: 50%;
      background: url(../img/prize-box.png) no-repeat;
      background-size: 100% 100%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      >div{
        font-size: .28rem;
        color: #FF9F3D;
        padding-top: 3.3rem;
        box-sizing: border-box;
        .center;
        b{
          color: #DD480A;
          font-size: .42rem;
          font-weight: 800;
          display: block;
        }
        span{
          color: #DD480A;
          font-size: .28rem;
          font-weight: 600;
        }
        p{
          font-size: .28rem;
          margin-top: .45rem;
      }
      }
      .cancel{
        position: absolute;
        left: calc(~"50% - .225rem");;
        top: calc(~"100% + .4rem");
        display: inline-block;
        width: .45rem;
        height: .45rem;
        background: url("../img/cancel-icon.png") no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}
//我的旺签
#lots{
  display: none;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  .my-goodLot{
    padding-top: .3rem;
    box-sizing: border-box;
    background: url(../img/body-bg.png) #C70529 repeat-y;
    background-size: 100% auto;
    height: 100vh;
    .lot-txt{
      .center;.white;
      line-height: .65rem;
      p:nth-of-type(1){
        font-size: .44rem;
        b{
          color: #FFD02A
        }
      }
      p:nth-of-type(2){
        font-size: .3rem;
        color: #FFD02A
      }
    }
    .lot-img{
      background: url("../img/light.png") center no-repeat;
      background-size: 100% auto;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 10rem;
      overflow: hidden;
      .img{
        height: 10rem;
        margin: 0 auto;
        text-align: center;
        background: none;
        &.up{
          animation: up .8s linear;
        }
        @keyframes up {
          0%{
            transform: translateY(100%);
          }
          100%{
            transform: translateY(0%);
          }
        }
      }
      .rat{
        background: url("../img/lot-rat.png") center no-repeat;
        background-size: auto 100%;
      }
      .cow{
        background: url("../img/lot-cow.png") center no-repeat;
        background-size: auto 100%;
      }
      .tigger{
        background: url("../img/lot-tigger.png") center no-repeat;
        background-size: auto 100%;
      }
      .rabbit{
        background: url("../img/lot-rabbit.png") center no-repeat;
        background-size: auto 100%;
      }
      .dragon{
        background: url("../img/lot-dragon.png") center no-repeat;
        background-size: auto 100%;
      }
      .snake{
        background: url("../img/lot-snake.png") center no-repeat;
        background-size: auto 100%;
      }
      .horse{
        background: url("../img/lot-horse.png") center no-repeat;
        background-size: auto 100%;
      }
      .sheep{
        background: url("../img/lot-sheep.png") center no-repeat;
        background-size: auto 100%;
      }
      .monkey{
        background: url("../img/lot-monkey.png") center no-repeat;
        background-size: auto 100%;
      }
      .chicken{
        background: url("../img/lot-chicken.png") center no-repeat;
        background-size: auto 100%;
      }
      .dog{
        background: url("../img/lot-dog.png") center no-repeat;
        background-size: auto 100%;
      }
      .pig{
        background: url("../img/lot-pig.png") center no-repeat;
        background-size: auto 100%;
      }
    }
    .ewmShow{
      display: none;width: 100%;height: 2rem; position: absolute;bottom: 0;left: 0;text-align: center;z-index: 55;
      div{
        vertical-align: top;color: #CA0529;font-size: .24rem; text-align: left;display: inline-block;margin: 0.7rem 1.5rem 0 0;
      }
      img{height: 1.5rem; margin-top: .25rem;}
    }
  }
  .bottom-cloud{
    height: 3rem;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
    width: 100%;
    //background: url("../img/bottom-cloud.png") no-repeat;
    //background-size: 100% 100%;
    img{
      width: 100%;height: 100%
    }
  }
  .btns{
    padding: 0 .3rem .55rem;
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    bottom: 0;
    z-index: 5;
    div{
      height: .9rem;
      line-height: .88rem;
      background: url("../img/btn-bg2.png") no-repeat;
      background-size: 100% 100%;
      margin: 0 .15rem;
      .center;
      width: calc(~"50% - .3rem");
      color: #C70529;
      font-size: .3rem;
      font-weight: 600;
      box-sizing: border-box;
      float: left;
    }
  }
  //长按保存
  aside{
    display: none;
    .center;
    font-size: .29rem;
    position: absolute;
    width: 100%;
    bottom: .7rem;
    color: #C70529;
    z-index: 244;
  }
}